<template>
  <div id="app">
    <transition name="bounce">
      <router-view/>
    </transition>
     <loading v-model="isLoading"></loading>
  </div>
</template>
<script>
import { Loading } from 'vux'
import { mapState } from 'vuex'
export default {
  name: 'maoxiuapp',
  components:{
    Loading
  },
  computed: {
    ...mapState({
      isLoading: state => state.loading.isLoading
    })
  },
}
</script>

<style lang="less" scoped="">
  body{
    @-webkit-keyframes a {
        0% {
            -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
            opacity: 0
        }
        to {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            opacity: 1
        }
    }

    @keyframes a {
        0% {
            -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
            opacity: 0
        }
        to {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            opacity: 1
        }
    }

    @-webkit-keyframes b {
        0% {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            opacity: 1
        }
        to {
            -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
            opacity: 0
        }
    }

    @keyframes b {
        0% {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            opacity: 1
        }
        to {
            -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
            opacity: 0
        }
    }

    .bounce-enter-active {
        -webkit-animation: a .5s forwards;
        animation: a .2s forwards
    }

    .bounce-leave-active {
        -webkit-animation: b .2s forwards;
        animation: b .5s forwards
    }
    .bounce-enter, .bounce-leave-to
    {
      transform: translateX(10px);
      opacity: 0;
    }
  }
 


</style>

